<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>天津轨道交通地铁四号线门禁系统</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/index.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- header start -->
		<div class="header">
			<div class="title"><i>CSTY</i> 天津轨道交通地铁四号线门禁系统</div>	
			<div class="time" id="time">
				2020 年 6 月 3 日 12:00:00
			</div>
			<div class="full" onclick="full()">
				全屏
			</div>
		</div>
		<!-- header end -->
		<!-- main start -->
		<div class="main clearfix">
			<div class="box1">
				<div class="title">站点列表</div>
				<div class="content">
					<ul class="clearfix"></ul>
				</div>
			</div>
			<div class="box2">
				<div class="wrap"></div>
				<div class="inner"></div>
			</div>
			<div class="box3">
				<div class="title">报警事件</div>
				<div class="content">
					<div class="head">
						<p>
							<span>消息明细</span>
							<span>报警名称</span>
							<span>时间</span>
						</p>						
					</div>
					<ul></ul>
				</div>
			</div>
			<div class="box4">
				<div class="title">门禁状态</div>
				<div class="content">
					<ul>
						<li class="clearfix">
							<div class="left">
								<p>
									<img src="img/key1.png" >
									<span>1</span>
								</p>
							</div>
							<div class="right item item1">
								<div class="list list1 clearfix"></div>
								<div class="list list2 clearfix"></div>	
							</div>
						</li>
						<li class="clearfix item item2">
							<div class="left">
								<p>
									<img src="img/key2.png" >
									<span>2</span>
								</p>
							</div>
							<div class="right">
								<div class="list list3 clearfix"></div>
								<div class="list list4 clearfix"></div>	
							</div>
						</li>
					</ul>
					
				</div>
			</div>
			<div class="box5">
				<div class="title">出入事件</div>
				<div class="content">
					<div class="head">
						<p>
							<span>消息明细</span>
							<span>报警名称</span>
							<span>时间</span>
						</p>						
					</div>
					<ul></ul>
				</div>
			</div>
		</div>
		<!-- main end -->
		
		<!-- 弹窗 -->
		<div class="tan">
			<div class="inner clearfix">
				<div class="title">
					<div>天津轨道交通地铁四号线门禁系统1111111111天津轨道交通地铁四号线门禁系统1111111111天津轨道交通地铁四号线门禁系统</div>
				</div>
				<p>
					<img src="img/open.png" >
					<select>
						<option value ="">开门</option>
						<option value ="">0秒</option>
						<option value ="" selected="selected">5秒</option>
						<option value ="">10秒</option>
						<option value ="">15秒</option>
					</select>
				</p>
				<p>
					<img src="img/close.png" >
					<span class="closedoor">关门</span>
				</p>				
			</div>
		</div>
	</body>
</html>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	// 站点列表
	$('.box1 ul').html('')	
	for(var i in data){	
		if(i=='胡园'){
			$('.box1 ul').append('<li class="on" title="'+i+'"><span>'+i+'</span></li>')
		}else{
			$('.box1 ul').append('<li  title="'+i+'"><span>'+i+'</span></li>')
		}
	}
	
	// 报警事件/出入事件
	function render1(res,dom,imgurl){
		$(dom).html('')
		if(res){
			res.forEach(function(item,key){
				$(dom).append('<li>'+
						'<span><img src="'+imgurl+'"></span>'+
						'<span title="'+item.msg+'">'+item.msg+'</span>'+
						'<span>'+item.name+'</span>'+
						'<span>'+item.time+'</span>'+
					'</li>')
			})
		}
		
	}
	// 门禁状态
	function render2(res){
		$('.box4 ul').html('')	
		if(res){
			res.forEach(function(item,key){		
				var listr=""
				var listr2=""
				for(var i=0;i<32;i++){
					if(item['list1'][i]){
						if(i==5){
							listr+='<p>'+
									'<span class="clearfix">'+
										'<span></span>'+
										'<span class="on"></span>'+
									'</span>'+
									'<a href="javascript:;" class="mr2">'+
										'<img src="'+item["list1"][i]["imgurl1"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
									'<a href="javascript:;">'+
										'<img src="'+item["list1"][i]["imgurl2"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
								'</p>'
							
						}else{
							listr+='<p>'+
									'<span class="clearfix">'+
										'<span></span>'+
										'<span></span>'+
									'</span>'+
									'<a href="javascript:;" class="mr2">'+
										'<img src="'+item["list1"][i]["imgurl1"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
									'<a href="javascript:;">'+
										'<img src="'+item["list1"][i]["imgurl2"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
								'</p>'
						}
						
					}else{
						listr+='<p class="none"></p>'
					}
					if(item['list2'][i]){
						if(i==2){
							listr2+='<p>'+
									'<span class="clearfix">'+
										'<span></span>'+
										'<span class="on"></span>'+
									'</span>'+
									'<a href="javascript:;" class="mr2">'+
										'<img src="'+item["list2"][i]["imgurl1"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
									'<a href="javascript:;">'+
										'<img src="'+item["list2"][i]["imgurl2"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
								'</p>'
						}else{
							listr2+='<p>'+
									'<span class="clearfix">'+
										'<span></span>'+
										'<span></span>'+
									'</span>'+
									'<a href="javascript:;" class="mr2">'+
										'<img src="'+item["list2"][i]["imgurl1"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
									'<a href="javascript:;">'+
										'<img src="'+item["list2"][i]["imgurl2"]+'" >'+
										'<span>一段说明一段说明一段说明一段说明</span>'+
									'</a>'+
								'</p>'
						}
						
					}else{
						listr2+='<p class="none"></p>'
					}	
				}
				$('.box4 ul').append('<li class="clearfix">'+
						'<div class="left">'+
							'<p>'+
							'<a	href="">'+
								'<img src="'+item.imgstate+'" >'+
								'<span>'+(key+1)+'</span>'+
							'</a>'+
							'</p>'+
						'</div>'+
						'<div class="right item item1">'+
							'<div class="list list1 clearfix">'+listr+'</div>'+
							'<div class="list list2 clearfix">'+listr2+'</div>'+
						'</div>'+
					'</li>')				
			})
			
		}
		
	}
	
	// 数据切换
	$('.box1').on('click','li',function(){
		$(this).siblings().removeClass('on')
		$(this).addClass('on')
		currentindex=$('.box1 li.on').text()
		if(Object.keys(data[currentindex]).length>0){
			// 报警事件
			render1(data[currentindex]['baojing'],".box3 ul","img/warning.png")
			// 出入事件
			render1(data[currentindex]['churu'],".box5 ul","img/churu.png")
			// 门禁状态
			render2(data[currentindex]['menjin'])
		}else{
			// 报警事件
			render1("",".box3 ul","img/warning.png")
			// 出入事件
			render1("",".box5 ul","img/churu.png")
			// 门禁状态
			render2("",".box4 .item1 .list1")
		}
		
	})
	
	$('.box4').on('click','.list a',function(){
		$('.tan').show()
	})
	$(".closedoor").click(function(){
		$('.tan').hide()
	})
	$(".tan .inner").click(function(e){
		e.stopPropagation()
	})
	$(".tan").click(function(){
		$('.tan').hide()
	})
	
	// 单位数补0
	 function change(t){
	 	if(t<10){
	 	 return "0"+t;
	 	}else{
	 	 return t;
	 	}
	 }
	 // 当前时间
	function formDate(){
		setInterval(function(){
			var d=new Date();
			var year=d.getFullYear();
			var month= change(d.getMonth()+1);
			var day= change(d.getDate());
			var hour= change(d.getHours());
			var minute= change(d.getMinutes());
			var second= change(d.getSeconds());
			var time=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
			var weekarr = ["日", "一", "二", "三", "四", "五", "六"]; 
			var key=d.getDay()
			document.getElementById('time').innerHTML=year+'年'+month+'月'+day+'日 '+ hour+':'+minute+':'+second
		},1000)			
	}
	
	// 日期
	formDate()
	// 初始化页面
	var currentindex=$('.box1 li.on').text()
	// 报警事件
	render1(data[currentindex]['baojing'],".box3 ul","img/warning.png")
	// 出入事件
	render1(data[currentindex]['churu'],".box5 ul","img/churu.png")
	// 门禁状态
	render2(data[currentindex]['menjin'])
	
	
	
	// 全屏
	function full(){
		if(!!window.ActiveXObject || "ActiveXObject" in window){
		  alert("您的浏览器暂不支持,请按F11");
		  return;
		}
		var docElm = document.documentElement;
		//W3C 
		if (docElm.requestFullscreen) { 
			docElm.requestFullscreen(); 
		}
		//FireFox 
		else if (docElm.mozRequestFullScreen) { 
			docElm.mozRequestFullScreen(); 
		}
		//Chrome等 
		else if (docElm.webkitRequestFullScreen) { 
			docElm.webkitRequestFullScreen(); 
		}
		//IE11
		else if (elem.msRequestFullscreen) {
		  elem.msRequestFullscreen();
		}
		
		if (document.exitFullscreen) { 
			document.exitFullscreen(); 
		} 
		else if (document.mozCancelFullScreen) { 
			document.mozCancelFullScreen(); 
		} 
		else if (document.webkitCancelFullScreen) { 
			document.webkitCancelFullScreen(); 
		}
		else if (document.msExitFullscreen) {
			  document.msExitFullscreen();
		}
		
	}
	
</script>